<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读器显示测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-result {
            margin: 10px 0;
            padding: 10px;
            border-radius: 5px;
        }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
        .info { background-color: #d1ecf1; color: #0c5460; }
        .warning { background-color: #fff3cd; color: #856404; }
        
        .test-container {
            border: 2px solid #ddd;
            margin: 20px 0;
            padding: 20px;
            border-radius: 8px;
        }
        
        .pdf-canvas-container {
            width: 100%;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ccc;
            background-color: #f8f9fa;
            margin: 10px 0;
        }
        
        .pdf-canvas {
            border: 1px solid #999;
            background-color: white;
        }
        
        button {
            margin: 5px;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>阅读器显示测试</h1>
    
    <div class="test-container">
        <h3>Utils.dom.show() 测试</h3>
        <div id="testResults"></div>
        
        <div class="pdf-canvas-container" id="testContainer" style="display: none;">
            <canvas class="pdf-canvas" id="testCanvas" width="200" height="150"></canvas>
            <p>测试容器内容</p>
        </div>
        
        <button onclick="testShow()">测试显示</button>
        <button onclick="testHide()">测试隐藏</button>
        <button onclick="testForceShow()">强制显示</button>
        <button onclick="checkStatus()">检查状态</button>
    </div>
    
    <div class="test-container">
        <h3>PDF阅读器链接测试</h3>
        <p>点击下面的链接测试PDF阅读器：</p>
        <a href="reader.html?book=jinyouth-issue1&page=1" target="_blank">打开《缙青年》第1期</a><br>
        <a href="reader.html?book=jinyouth-issue2&page=1" target="_blank">打开《缙青年》第2期</a><br>
        <a href="reader.html?book=jinyouth-issue3&page=1" target="_blank">打开《缙青年》第3期</a><br>
        <a href="reader.html?book=jinyouth-issue4&page=1" target="_blank">打开《缙青年》第4期</a>
    </div>

    <script>
        // 模拟Utils.dom对象
        const Utils = {
            dom: {
                show(element) {
                    if (!element) return;
                    
                    // 移除display: none，让CSS样式生效
                    element.style.display = '';
                    element.removeAttribute('hidden');
                    
                    // 确保元素可见
                    element.style.visibility = 'visible';
                    element.style.opacity = '1';
                },
                
                hide(element) {
                    if (!element) return;
                    element.style.display = 'none';
                }
            }
        };

        function addResult(message, type) {
            const resultsDiv = document.getElementById('testResults');
            const div = document.createElement('div');
            div.className = `test-result ${type}`;
            div.textContent = message;
            resultsDiv.appendChild(div);
        }

        function testShow() {
            const container = document.getElementById('testContainer');
            addResult('调用 Utils.dom.show()...', 'info');
            
            Utils.dom.show(container);
            
            setTimeout(() => {
                const computedStyle = window.getComputedStyle(container);
                addResult(`显示后状态: display=${computedStyle.display}, visibility=${computedStyle.visibility}, opacity=${computedStyle.opacity}`, 'info');
                
                if (computedStyle.display !== 'none') {
                    addResult('✅ 显示成功！', 'success');
                } else {
                    addResult('❌ 显示失败！', 'error');
                }
            }, 100);
        }

        function testHide() {
            const container = document.getElementById('testContainer');
            addResult('调用 Utils.dom.hide()...', 'info');
            
            Utils.dom.hide(container);
            
            setTimeout(() => {
                const computedStyle = window.getComputedStyle(container);
                addResult(`隐藏后状态: display=${computedStyle.display}`, 'info');
                
                if (computedStyle.display === 'none') {
                    addResult('✅ 隐藏成功！', 'success');
                } else {
                    addResult('❌ 隐藏失败！', 'error');
                }
            }, 100);
        }

        function testForceShow() {
            const container = document.getElementById('testContainer');
            addResult('强制显示容器...', 'info');
            
            // 模拟reader.js中的强制显示逻辑
            container.style.display = 'flex';
            container.style.visibility = 'visible';
            container.style.opacity = '1';
            
            setTimeout(() => {
                const computedStyle = window.getComputedStyle(container);
                addResult(`强制显示后状态: display=${computedStyle.display}, visibility=${computedStyle.visibility}, opacity=${computedStyle.opacity}`, 'info');
                
                if (computedStyle.display === 'flex') {
                    addResult('✅ 强制显示成功！', 'success');
                } else {
                    addResult('❌ 强制显示失败！', 'error');
                }
            }, 100);
        }

        function checkStatus() {
            const container = document.getElementById('testContainer');
            const computedStyle = window.getComputedStyle(container);
            
            addResult('=== 当前状态检查 ===', 'info');
            addResult(`内联样式: display=${container.style.display || '未设置'}, visibility=${container.style.visibility || '未设置'}, opacity=${container.style.opacity || '未设置'}`, 'info');
            addResult(`计算样式: display=${computedStyle.display}, visibility=${computedStyle.visibility}, opacity=${computedStyle.opacity}`, 'info');
            addResult(`元素尺寸: ${container.offsetWidth}x${container.offsetHeight}`, 'info');
            
            if (computedStyle.display !== 'none' && container.offsetWidth > 0 && container.offsetHeight > 0) {
                addResult('✅ 元素当前可见', 'success');
            } else {
                addResult('❌ 元素当前不可见', 'warning');
            }
        }

        // 页面加载时检查初始状态
        window.addEventListener('load', () => {
            addResult('页面加载完成，检查初始状态...', 'info');
            checkStatus();
        });
    </script>
</body>
</html>
